import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Comment, Reply } from 'weaver-mobile-page';
import MeetingUtil from '../../util/meetingUtil';
import '../../style/index';

@inject('viewMeetingStore')
@withRouter
@observer
class DiscussView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
    }

    render() {
        const { comment , reply, submitReply} = this.props.viewMeetingStore;
        const discussHeight = this.getHeight();
        const leftConfig = [
          { type: 'voice' },
          { type: 'blog-biaoqing' },
          // { type: '@' },
          { type: 'tianjia' },
        ];
        return (
          <div style={{height:'100%'}}>
            <div style={{height:discussHeight}}>
              <Comment
                style={{borderBottom:'1px solid #ddd',height:'100%'}}
                store={comment}
              >
              </Comment>
            </div>
              <Reply
                wrappedComponentRef={ref => this.replyRef = ref}
                store={reply}
                showOutInput={true}
                defaultShow={true}
                visible={false}
                leftConfig={leftConfig}
                // onVisibleChange={(visible) => { setReplyVisible(visible) }}
                onSubmit={datas => {submitReply(datas),this.changeVisible()}}
              />
          </div>
        )
    }

    changeVisible = () => {
      this.replyRef.setState({ visible: false }, () => {
        // this.replyRef.getInputFocus();
      });
    }

    getHeight = () => {
      return document.body.clientHeight - MeetingUtil.getTabHeight() -( 35 * MeetingUtil.getBaseHeight());
  }
}

export default DiscussView;